<!DOCTYPE html>
<html lang="en">
<head>
    {include file="common/meta" /}
</head>
<body>
    <div class="x-body">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM元素 -->
        <!-- 按分类统计帖子 -->
        <div id='main' style="width:100%; height:600px;"></div>
        
    </div>
</body>
</html>

<script src="/assets/admin/js/echarts.min.js"></script>
<script type="text/javascript">
  var userlist=`{$userlist}`
  userlist=JSON.parse(userlist)

  var allcount=`{$ySenDate}`
  allcount=JSON.parse(allcount)

  var malecount=`{$yMale}`
  malecount=JSON.parse(malecount)

  var famalecount=`{$yFamale}`
  famalecount=JSON.parse(famalecount)

  var secrecycount=`{$ySecrecy}`
  secrecycount=JSON.parse(secrecycount)

  var time=`{$xData}`
  time=JSON.parse(time)


  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: '用户量统计'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: time
    },
    yAxis: {
      
    },
    series: [
      {
        name: '总量',
        type: 'line',
        data: allcount,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        // markLine: {
        //   data: [{ type: 'average', name: 'Avg' }]
        // }
      },
      {
        name: '保密',
        type: 'line',
        data: secrecycount,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        // markLine: {
        //   data: [{ type: 'average', name: 'Avg' }]
        // }
      },
      {
        name: '男',
        type: 'line',
        data: malecount,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        // markLine: {
        //   data: [{ type: 'average', name: 'Avg' }]
        // }
      },
      {
        name: '女',
        type: 'line',
        data: famalecount,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        // markLine: {
        //   data: [{ type: 'average', name: 'Avg' }]
        // }
      },
    ]
  };

  option && myChart.setOption(option);

</script>